<template>
<div>
    <template v-for="item in menuData">
        <!-- 此菜单下还有子菜单 -->
        <el-submenu v-if="item.childs&&item.entity&&!item.entity.isHide" :key="item.entity.id" :data="item" :index="item.entity.path">
            <template slot="title">
                <i :class="item.entity.icon"></i>
                <span slot="title">{{item.entity.name}}</span>
            </template>
            <!-- 递归 -->
            <sub-menu :menuData="item.childs"></sub-menu>
        </el-submenu>
        <!--一级菜单 -->
        <el-menu-item v-if="!(item.childs&&item.entity)&&!item.entity.isHide" :key="item.entity.id" :data="item" :index="item.entity.path">
            <i :class="item.entity.icon"></i>
            <span slot="title">{{item.entity.name}}</span>
        </el-menu-item>
    </template>
</div>
</template>

<script>
export default {
    name: 'SubMenu',
    props: {
        menuData: {
            require: true,
            type: Array
        }
    }
}
</script>
